<template>
  <div id="rule-table" class="rule-table--wrapper">
    <el-form ref="editForm" inline label-width="0px" :model="tableForm">
      <Table
        :data="tableForm.listData"
        :column-config="columnConfig"
        height="360"
        :use-cusdom-header="true"
      >
        <!-- <template v-slot:name="slotProps">
          <el-button>{{ slotProps.row.name }}</el-button>
        </template> -->
        <template v-slot:name="slotProps">
          <span v-if="slotProps.row.isNew || slotProps.row.isEdit">
            <el-form-item
              :prop="`listData.${slotProps.index}.name`"
              :rules="eidtFormRules.name"
            >
              <el-input
                v-model="slotProps.row.name"
                :disabled="slotProps.row.isNew && isListDataEdit"
              ></el-input>
            </el-form-item>
          </span>
          <span v-else>
            {{ slotProps.row.name || '--' }}
          </span>
        </template>
        <template v-slot:operation="slotProps">
          <el-button
            v-if="slotProps.row.isEdit"
            type="text"
            @click="editItem(slotProps)"
            >保存</el-button
          >
          <el-button
            v-if="slotProps.row.isNew"
            type="text"
            :disabled="isListDataEdit"
            @click="addItem(slotProps.index)"
            >添加</el-button
          >
          <el-button
            v-if="!slotProps.row.isEdit && !slotProps.row.isNew"
            type="text"
            @click="editItem(slotProps)"
            >编辑</el-button
          >
          <el-button
            v-if="!slotProps.row.isEdit && !slotProps.row.isNew"
            type="text"
            @click="removeItem(slotProps.index)"
            >删除</el-button
          >
        </template>
      </Table>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'RuleTable',
  data() {
    //自定义验证示例
    const validateAccuracy = (rule, value, callback) => {
      let index = Number(
        rule.field.substring(
          rule.field.indexOf('.') + 1,
          rule.field.lastIndexOf('.')
        )
      )
      const row = this.tableForm.listData[index]
      if (
        (row.isNew && this.isListDataEdit) ||
        (row.type && row.type != 'decimal') ||
        Boolean(row.refenceCode)
      ) {
        callback()
        return
      }
      if (!value) {
        if (this.tableForm.listData[index].length)
          this.$refs.editForm.clearValidate(`listData.${index}.length`)
        callback(new Error('请输入精度'))
      } else if (this.tableForm.listData[index].length < Number(value)) {
        callback(new Error('精度不能大于长度'))
      } else {
        if (this.tableForm.listData[index].length)
          this.$refs.editForm.clearValidate(`listData.${index}.length`)
        callback()
      }
    }
    return {
      isListDataEdit: false,
      newItem: {
        type: '',
        name: '',
        isNew: true,
        isEdit: false
      },
      tableForm: {
        listData: []
      },
      eidtFormRules: {
        name: [{ required: true, message: '请输入中文名称', trigger: 'blur' }]
      },
      columnConfig: [
        {
          attr: {
            prop: 'name',
            label: '英文名称'
          },
          scopedSlot: 'name'
        },
        {
          attr: {
            prop: 'type',
            label: '类型'
          },
          scopedSlot: 'type'
        },
        {
          attr: {
            label: '操作'
          },
          scopedSlot: 'operation'
        }
      ]
    }
  },
  created() {
    this.tableForm.listData.push({ ...this.newItem })
  },
  methods: {
    addItem(index) {
      let isError = this.formClearValidate(index, false)
      if (!isError) {
        delete this.tableForm.listData[index].isNew
        this.tableForm.listData.push({ ...this.newItem })
        this.$nextTick(function () {
          let div = document.getElementById('rule-table')
          if (div)
            div = div.getElementsByClassName(
              'el-table__body-wrapper is-scrolling-none'
            )
          if (div && div[0]) div[0].scrollTop = div[0].scrollHeight
        })
      }
    },
    editItem(slotProps) {
      if (!this.tableForm.listData[slotProps.index].isEdit) {
        if (this.isListDataEdit) {
          this.$message.error('请先保存正在编辑的数据')
        } else {
          this.toggleStatus(slotProps.index)
          this.formClearValidate(this.tableForm.listData.length - 1, true)
        }
      } else {
        let isError = this.formClearValidate(slotProps.index, false)
        if (!isError) {
          this.toggleStatus(slotProps.index)
        }
      }
    },
    removeItem(index) {
      this.tableForm.listData.splice(index, 1)
    },
    toggleStatus(index) {
      this.tableForm.listData[index].isEdit = !this.tableForm.listData[index]
        .isEdit
      this.isListDataEdit = this.tableForm.listData[index].isEdit
    },
    // 校验或者移除校验
    formClearValidate(index, isClear = false) {
      let tempList = []
      let header = ['name']
      header.map(item => {
        tempList.push(`listData.${index}.${item}`)
      })
      if (isClear) {
        this.$refs.editForm.clearValidate(tempList)
      } else {
        let isError
        this.$refs.editForm.validateField(tempList, function (errorMessage) {
          if (errorMessage) isError = true
        })
        return isError
      }
    }
  }
}
</script>

<style></style>
